<template>
  <div>
    <Header>
      <el-button size="small" @click="$router.push('/limit/list')">
        返回
      </el-button>
      <el-button type="primary" size="small" @click="fanhui"
        >添加活动商品</el-button
      >
      <el-button size="small" @click="delALL">批量移除</el-button>
      <div class="heads-right">
        <el-input v-model="input" size="small" placeholder="请输入关键字">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="shopsearch"
          ></el-button>
        </el-input>
      </div>
    </Header>
    <Main
      :data="tableData"
      :footer-lock="totals > 10"
      @selection-change="handleSelectionChange"
    >
      <!-- <div class="list-title">
        <span>限时折扣</span>—<span style="cursor:pointer;" @click="active"
          >活动名称</span
        >—<span>新增活动商品</span>
      </div> -->

      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="商品名称" min-width>
        <template slot-scope="scope">
          <div style="margin-left:15px;">
            <div><span></span>{{ scope.row.goods_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品封面" min-width>
        <template slot-scope="scope">
          <div>
            <img
              :src="Url + scope.row.goods_cover + $store.state.imgRotate"
              alt=""
              width="70px"
              height="50px"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sale-price"
        label="销售价"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.sku_low_price == scope.row.sku_up_price"
            >￥{{ scope.row.sku_low_price }}</span
          >
          <span v-else
            >￥{{ scope.row.sku_low_price }} - ￥{{
              scope.row.sku_up_price
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="activity-price"
        label="活动价"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.join_low_price == scope.row.join_up_price"
            >￥{{ scope.row.join_low_price }}</span
          >
          <span v-else
            >￥{{ scope.row.join_low_price }} - ￥{{
              scope.row.join_up_price
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="limit_buy"
        align="center"
        label="限购"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="stock"
        label="活动库存"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="sort"
        label="活动排序"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="deal"
        label="操作"
        align="center"
        show-overflow-tooltip
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <div
            style="display: flex;justify-content: space-around;color: #409EFF;"
          >
            <div @click="bianji(scope.row)"><span>编辑</span></div>
            <div @click="del(scope.row)"><span>移除</span></div>
          </div>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>

    <el-dialog
      title="设置活动商品"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
    >
      <div><span>商品名称，这是一款即将上架的商品名称</span></div>
      <div style="margin-top: 10px;">
        <el-form
          ref="Form"
          :model="Form"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="活动库存" prop="inventory">
            <el-input v-model="Form.inventory" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="预约人数" prop="people">
            <el-input v-model="Form.people" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sorting">
            <el-input v-model="Form.sorting" style="width: 300px;"></el-input>
          </el-form-item>
          <!-- <el-form-item label="活动价" prop="sprice">
              <el-input v-model="Form.sprice" style="width: 300px;"></el-input>
            </el-form-item> -->
        </el-form>
      </div>
      <div>
        <el-table :data="tableDataAll" border style="width: 100%">
          <el-table-column prop="sku_type_name" label="规格名称" min-width>
          </el-table-column>
          <el-table-column prop="sku_type" label="规格名称" min-width>
          </el-table-column>
          <el-table-column prop="status" label="是否参加" min-width>
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchTag(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sku_stock" label="商品库存" min-width>
          </el-table-column>
          <el-table-column label="活动参加库存" min-width>
            <template slot-scope="scope">
              <el-input-number
                v-model.lazy="scope.row.join_stock"
                size="small"
                style="width:100%;"
                :precision="0"
                :min="0"
                :max="scope.row.sku_stock"
                placeholder="请输入参加库存"
                :controls="false"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="sku_price" label="销售价" min-width>
          </el-table-column>
          <el-table-column label="活动价" min-width>
            <template slot-scope="scope">
              <el-input-number
                v-model.lazy="scope.row.join_price"
                size="small"
                style="width:100%;"
                :precision="2"
                placeholder="请输入拼团价格"
                :min="0"
                :max="scope.row.sku_price"
                :controls="false"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleOne">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { aGOODSLIST, DELGOODS } from "@/service/public";
import { SHOPEDIT, SHOPTABLE } from "../service";
export default {
  name: "Shopmanage",
  data() {
    return {
      tableData: [],
      tableDataAll: [],
      open: false,
      input: "",
      multipleSelection: [],
      dialogVisible: false,
      Url: this.$store.state.qiniu,
      limit_id: "",
      goods_id: "",
      rules: {
        inventory: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],
        people: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],
        sorting: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],
        price: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
      },
      Form: {
        inventory: "",
        people: 0,
        sorting: "",
        sprice: ""
      },
      page: 1,
      totals: 0,
      tablecode: []
    };
  },
  created() {
    this.limit_id = this.$route.query.limit_id;
    this.shopmanageAPI();
    this.shoptableAPI();
  },
  methods: {
    bianji(row) {
      this.goods_id = row.goods_id;
      this.Form.inventory = row.stock;
      this.Form.sorting = row.sort;
      this.Form.sprice = row.join_up_price;
      this.dialogVisible = true;
      this.shoptableAPI();
    },
    active() {
      this.$router.push("/limitList");
    },
    dialogVisibleOne() {
      this.dialogVisible = true;
      this.shopdeitAPI();
      this.shopmanageAPI();
    },
    switchTag(e) {
      if (this.tableDataAll.length > 1) {
        SHOPTABLE({
          status: e.status ? 1 : 0,
          activity_type: 2,
          activity_id: this.limit_id,
          goods_id: this.goods_id
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "设置成功",
              type: "success"
            });
          }
        });
      } else {
        this.$message({
          message: "规格商品大于一才可以操作",
          type: "error"
        });
      }
      this.shoptableAPI();
    },
    del(row) {
      this.$confirm(
        "是否批量移除? 移除后无法恢复，商品无法参加此活动",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          DELGOODS({
            activity_id: this.limit_id,
            activity_type: 2,
            id_arr: row.goods_id
          }).then(res => {
            if (res.code === 200) {
              this.$message(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    },
    delALL() {
      this.$confirm(
        "是否批量移除? 移除后无法恢复，商品无法参加此活动",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let arr = [];
          this.tablecode.forEach(ele => {
            arr.push(ele.goods_id);
          });
          DELGOODS({
            activity_id: this.limit_id,
            activity_type: 2,
            id_arr: arr.join(",")
          }).then(res => {
            if (res.code === 200) {
              this.$message(res.msg);
            }
            this.shopmanageAPI();
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    },
    handleSelectionChange(e) {
      this.tablecode = e;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    changes(page) {
      this.page = page;
      this.shopmanageAPI();
    },
    shopsearch() {
      this.shopmanageAPI();
    },
    shopmanageAPI() {
      aGOODSLIST({
        search: this.input,
        activity_type: 2,
        activity_id: this.limit_id
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.$message(res.msg);
        }
      });
    },
    shopdeitAPI() {
      let arr = [];
      this.tableDataAll.map(ele => {
        ele.sku_price = parseFloat(ele.sku_price);
        arr.push({
          uniqueKey: ele.uniqueKey,
          status: ele.status ? 1 : 0,
          join_price: ele.join_price,
          join_stock: ele.join_stock
        });
      });
      SHOPEDIT({
        limit_id: this.limit_id,
        goods_id: this.goods_id,
        sort: this.Form.sorting,
        stock: this.Form.inventory,
        unite_price: this.Form.sprice,
        goods: JSON.stringify(arr)
      }).then(res => {
        if (res.code === 200) {
          this.$message(res.msg);
        }
        this.dialogVisible = false;
      });
    },
    shoptableAPI() {
      SHOPTABLE({
        activity_type: 2,
        activity_id: this.limit_id,
        goods_id: this.goods_id
      }).then(res => {
        if (res.code === 200) {
          this.totals = res.count;
          res.data.map(ele => {
            ele.status = ele.status === 1;
            ele.sku_price = parseFloat(ele.sku_price);
            ele.sku_type_name = ele.sku_type_name.split(",");
            ele.sku_type = JSON.parse(ele.sku_type);
            ele.sku_type.map(item => {
              var skuTyp = [];
              var prop = [];
              for (prop in item) {
                skuTyp.push(item[prop]);
              }
              ele.sku_type = skuTyp;
            });
          });
          this.tableDataAll = res.data;
        }
      });
    },
    fanhui() {
      this.$router.push({ path: "/addshop?limit_id=" + this.limit_id });
    }
  }
};
</script>
<style lang="scss" scoped>
.shopmanage {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  .manage-title {
    height: 54px;
    line-height: 54px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 35px;
    background-color: rgba(255, 255, 255, 1);
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    font-size: 14px;
  }
  .manage-nav {
    width: 97%;
    margin-left: 30px;
    height: 68px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .nav-left {
      width: 45%;
      margin-left: 20px;
      margin-top: 14px;
      color: #606266;
    }
    .nav-right {
      width: 15%;
      margin-top: 14px;
      margin-right: 15px;
    }
  }
  .manage-content {
    width: 97%;
    margin-left: 30px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    border-top: 1px solid gainsboro;
  }
  .footer {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 90px;
    line-height: 76px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
    z-index: 100;
  }
}
</style>
